<script setup lang="ts">
import { Editor } from '@icon-park/vue-next'
import useLog from '@renderer/composables/useLog'
import { dayjs, ElMessage } from 'element-plus'
import { onBeforeRouteUpdate, useRoute } from 'vue-router'

const route = useRoute()

const { find, update, log } = useLog()
onBeforeRouteUpdate(async (to) => {
  const { id } = to.params
  await find(+id)
})

const updateLog = async () => {
  await update(log.value!)
  ElMessage({
    type: 'success',
    message: '修改成功'
  })
}
find(+route.params.id)
</script>

<template>
  <el-card shadow="always" class="h-full">
    <template #header>
      <div class="flex justify-between items-center">
        <!-- 面包屑 -->
        <el-breadcrumb>
          <el-breadcrumb-item :to="{ name: 'logList' }">新进班组计划</el-breadcrumb-item>
          <el-breadcrumb-item>{{ dayjs(log?.date).format('YYYY年MM月DD日') }}</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 按钮 -->
        <el-button
          type="primary"
          size="default"
          @click="$router.push({ name: 'record', params: { id: route.params.id } })"
        >
          转换班组</el-button
        >
      </div>
    </template>

    <div>
      <el-input
        v-model="log.content"
        placeholder="请输入新进班组管控记录"
        rows="28"
        type="textarea"
        v-if="log"
      />
      <div class="flex justify-end mt-4">
        <el-button type="primary" @click="updateLog">
          <Editor theme="outline" size="16" fill="#fff" class="mr-1" />
          修改</el-button
        >
      </div>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
main {
  @apply w-full h-full px-5 bg-slate-100;
  display: grid;
  grid-template-rows: 50px auto 30px;
  .date {
    @apply text-[16px] flex justify-between items-center border-b;
  }
  .content {
    @apply pt-5 opacity-80 text-[14px] border-b;
    .input {
      @apply w-full h-full outline-none;
    }
  }
  .created {
    @apply text-xs flex justify-end gap-2 opacity-60 items-center;
  }
}
</style>
